<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			. {
				margin: 0;
				padding: 0;
			}

			ul li {
				list-style: none;
			}

			.silder {
				width: 520px;
				height: 280px;
				background-color: pink;
				margin: 50px auto;
				position: relative;
			}

			.arrow-l,
			.arrow-r {
				position: absolute;
				/* 绝对定位 */
				width: 24px;
				height: 36px;
				display: block;
				/* 转换 */
				top: 50%;
				margin-top: -18px;
				/* 往上走是负值 */
			}

			.arrow-l {
				left: 0;
			}

			.arrow-r {
				right: 0;
			}

			.circle {
				width: 65px;
				height: 13px;
				background: rgba(255, 255, 255, 0.3);
				position: absolute;
				bottom: 15px;
				left: 50%;
				margin-left: -32px;				
				border-radius: 6px;
			}

			.circle li {
				width: 9px;
				height: 9px;
				background-color: #B7B7B7;
				float: left;
				margin: 2px;
				border-radius: 50%;
				/* 圆角的做法 */
			}

			li .current {
				background-color: #f40;
			}
		</style>
	</head>
	<body>
	</body>
	<div class="silder">

		<img src="images/taobao.jpg" alt="" />
		<a href="#" class="arrow-l">
			<img src="images/left.png" />
		</a>
		<a href="#" class="arrow-r">
			<img src="images/right.png" />
		</a>

		<ul class="circle">
			<!-- 小圆点 -->
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</html>
